<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>生成动态表格</title>
</head>
<!-- ## 2.循环生成列表数据，然后使用js实现隔行变色
```javascript
    for(var i = 0;i < 10;i++){
        if(i % 2 === 0){
            li.style.backgroundColor = 'red';
        }else{
            li.style.backgroundColor = 'red';
        }
    } -->
    <style>
        table{
            width: 100%;
            border: 1px solid black;
            border-spacing: 0px;
            border-collapse: collapse;
        }
        table tr td{
            border: 1px solid black;
        }
    </style>
<body>
    列表行：<input type="text" id="btn1">
    列表列：<input type="text" id="btn2">
    <button id="btn">生成</button>
    <table id="table"></table>
    <script>
        btn.onclick=function(){
            // 获取btn1/btn2的值
            var n1=btn1.value;
            var n2=btn2.value;
            // 不能在页面的外面获取值，如果在页面的外面，
            // 页面一加载就会没有值。获取的值为空
            var res='';
            // 外层循环实现行
            for(var i=0;i<n1;i++){
                res+='<tr>'
                // 内层循环实现列
                for(var j=0;j<n2;j++){
                    res+='<td>'+j+'</td>'
                }
                res+='</tr>'
            }
            table.innerHTML=res;
            
        }
        for(var k= 0;k < 100;k++){
        if(k % 2 === 0){
        table.style.background = 'red';
        }else{ 
        table.style.background = 'blue';
        }
    }

    </script>
    
</body>
</html>